<script setup>
name: 'child-comment'
defineProps({
  childComments: {
    type: Object,
    default: ()=> {}
  }
})
</script>
<template>
  <div class="comment-line-box" v-for="childComment in childComments">
    <div class="comment-list-item">
      <el-avatar icon="el-icon-user-solid" :size="35" style="width: 38px;"></el-avatar>
      <div class="right-container">
        <div class="left-box">
          <div class="comment-info">
            <div class="user">{{childComment.userName}}</div>
            <div class="content">{{childComment.content}}</div>
          </div>
          <div class="date">
            <span>{{childComment.createTime}}</span>
          </div>
        </div>
        <div class="right-box">
          <div class="delete">
            <span>删除</span>
          </div>
          <div class="replay">回复</div>
        </div>
      </div>
    </div>
<!--    &lt;!&ndash; 回复框 &ndash;&gt;-->
<!--    <replay :rootParentId="rootParentId" :comment="childComment" :showReplay="showReplay" :blogId="blogId" :getCommentList="getCommentList" style="margin-top: 5px;"></replay>-->
    <!-- 嵌套递归 -->
    <ChildComment :childComments="childComment.child"></ChildComment>
  </div>
</template>
<style lang="scss" scoped>
.comment-line-box {
  .comment-list-item {
    display: flex;
    margin-bottom: 10px;
    .right-container {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .left-box {
        display: flex;
        .comment-info {
          margin: 0 10px;
          .user {
            margin-bottom: 10px;
          }
        }
      }
      .right-box {
        display: flex;
        .delete {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>